<template>
    <div class="content">
        <popover :type="popoverType" :data="popoverAddition" />

        <filter-data :showType='6' :showCategory="showCategory"/>

        <div class="table-head" v-show="showTable || showTableEmpty">
            <div class="head-left" :class="{'head-left-shadow': managerList.length > 0 ? true : false }">广告附加信息</div>
            <div class="head-right">成效</div>
        </div>

        <div class="table">
            <el-table v-show="showTableEmpty" style="width: 100%" empty-text=" ">
                <el-table-column label="操作" width="160"></el-table-column>
                <el-table-column label="状态" width="100"></el-table-column>
                <el-table-column label="产品附加信息" width="160"></el-table-column>
                <el-table-column label="广告系列" width="160"></el-table-column>
                <el-table-column label="广告组" width="160"></el-table-column>
                <el-table-column label="广告" width="160"></el-table-column>
                <el-table-column label="展示数" width="120"></el-table-column>
                <el-table-column label="点击数" width="120"></el-table-column>
                <el-table-column label="点击率" width="120"></el-table-column>
                <el-table-column label="已花费" width="150"></el-table-column>
                <el-table-column :render-header="renderHeader" width="120"></el-table-column>
                <!--<el-table-column :render-header="renderHeader" width="120"></el-table-column>-->
            </el-table>
            <div class="empty-content" v-show="showTableEmpty">
                <div style="width: 100%">
                    <img src="../../../assets/img/no-data.png">
                </div>
                <span>暂无数据</span>
            </div>

            <loading :customClass="customLoading"  v-if="showLoading" />

            <el-table
                    empty-text=" "
                    v-show="showTable"
                    :row-class-name="tableRowClassName"
                    :data="managerList"
                    style="width: 100%">
                <el-table-column fixed label="操作" width="80">
                    <template scope="scope">
                        <div v-show="scope.row.type != 'category' && scope.row.type != 'summary'">
                            <i v-show="scope.row.status != 'REMOVED'" class="iconfont icon-edit icon-action" @click="editAds(scope.row)"></i>
                            <i v-show="scope.row.status != 'REMOVED'" class="iconfont icon-dustbin icon-action" @click="deleteAds(scope.row)"></i>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="状态" width="100">
                    <template scope="scope">
                        <div v-show="scope.row.type != 'category' && scope.row.type != 'summary'">
                            <span v-show="scope.row.status == 'APPROVED' || scope.row.status == 'UNCHECKED'" class="status-pot pot-blue"></span>
                            <span v-show="scope.row.status == 'DISAPPROVED'" class="status-pot pot-red"></span>
                            <span v-show="scope.row.status == 'REMOVED'" class="status-pot pot-grey"></span>
                            <span>{{scope.row.statusCN}}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="产品附加信息" width="160">
                    <template scope="scope">
                        <div v-for="content in scope.row.contentArr">
                            {{ content }}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed prop="adSeriesName" label="广告系列" width="160"></el-table-column>
                <el-table-column fixed prop="adGroupName" label="广告组" width="160"></el-table-column>
                <el-table-column fixed prop="name" label="广告" width="160"></el-table-column>
                <el-table-column prop="impressions" label="展示数" width="120"></el-table-column>
                <el-table-column prop="clicks" label="点击数" width="120"></el-table-column>
                <el-table-column prop="clickRate" label="点击率" width="120"></el-table-column>
                <el-table-column prop="spend" label="已花费" width="150"></el-table-column>
                <el-table-column prop="cpc" :render-header="renderHeader" width="120"></el-table-column>
                <!--<el-table-column prop="rank" :render-header="renderHeader" width="120"></el-table-column>-->
            </el-table>

            <el-pagination
                    v-show="showTable"
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSizes"
                    :page-size="page.pageSize"
                    layout="prev, pager, next, sizes, jumper"
                    :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import FilterData from '~/components/manager/google/filterData.vue'
    import Popover from '~/components/manager/google/popover.vue'
    import loading from '~/components/loading.vue'
    import * as types from '../../../store/mutation-types/manager/index'
    import { mapGetters } from 'Vuex'
    import { getStatusName , getStatus ,switchStatus,getAimName ,getTypeName} from '~/assets/js/option'
    import { isInteger , getDate , changeParam, getParam } from '~/assets/js/global'

    import Vue from 'vue'
    import { Table, TableColumn ,Button, Switch , Pagination, Tooltip, Message} from 'element-ui'
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Button);
    Vue.use(Switch);
    Vue.use(Pagination);
    Vue.use(Tooltip);

    export default{
        components: {
            FilterData,
            Popover,
            loading
        },
        layout: 'google-manager',
        data(){
            return{
                showLoading: false,
                popoverAddition: {},
                popoverType: '',
                customLoading : 'top:550px',
                showCategory: false,
                showTableEmpty:false,
                showTable:false,
                popover: {
                    title: '',
                },
                tipPopover: {},
                currentPage4: 4,
                managerList: [],
                page: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    total: 0,
                    currentPage: 1,
                    pageSize: 10
                },
                filter:{
                    pageNum: 1,
                    pageSize: 10,
                    dateStr:'LAST_7_DAYS',   //广告发布时间
                    status: '',   //投放状态
                    content: '',    //搜索内容
                    statistics: '',   //统计类型
                    startTime:'',
                    endTime: '',
                    type: ''    //附加信息类型
                },
                category: {
                    num:'',
                    index:''
                },
                sum: {}
            }
        },
        methods: {
            //获取列表
            getManagerList() {
                this.showLoading = true;
                this.$store.commit(types.ENABLE_EXPORT,{'enableExport': false});   //禁止导出按钮
                this.$store.dispatch('googleManageListAddition',this.filter)
                    .then(response => {
                        if(response.data && response.data.code == 1){
                            let result = response.data;
                            var list = result.data.list;
                            if(list.length > 0) {
                                this.$store.commit(types.ENABLE_EXPORT,{'enableExport': true});   //激活导出按钮
                                for (var i = 0; i < list.length;i++){
                                    //产品附加信息
                                    if(list[i].content){
                                        list[i].contentArr=list[i].content .split(";");
                                    }

                                    //细分受众统计
                                    if(list[i].list && list[i].list.length>0) {
                                        var addList = list[i].list;
                                        for(var j=0;j<addList.length;j++){
                                            addList[j]['type'] = 'category';
                                            list.splice(i+1+j,0,addList[j]);
                                        }
                                    }
                                    list[i].spend = isInteger(list[i].spend, 1);
                                    list[i].cpc = '￥' + list[i].cpc;
                                }

                                list[list.length-1].type = 'summary';
                                this.managerList = list;
                                this.showTable = true;
                                this.showTableEmpty = false;
                                this.showCategory = true;
                                this.showLoading = false;
                                this.page.total = result.data.total;
                                this.page.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                            }else {
                                this.showTableEmpty = true;
                                this.showTable = false;
                                this.showCategory = true;
                                this.showLoading = false;
                            }
                        }else {
                            this.showTableEmpty = true;
                            this.showTable = false;
                            this.showCategory = true;
                            this.showLoading = false;
                        }
                    })
                    .catch((error) => {
                        this.showTableEmpty = true;
                        this.showTable = false;
                        this.showCategory = true;
                        this.showLoading = false;
                    })
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
//                changeParam('pageSize',val);
                this.getManagerList();
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
//                changeParam('page',val);
                this.getManagerList();
            },

            //编辑广告
            editAds (row) {
                this.popover={
                    title: getTypeName(row.type),
                    id: row.id
                };
                switch (row.feedItem.extensionType) {
                    case 'CALLOUT':
                        this.popoverAddition={
                            'text':row.feedItem.text
                        };
                        break;
                    case 'CALL':
                        var countryIndex;
                        for(var i=0;i<this.countryList.length;i++){
                            if(row.feedItem.countryCode == this.countryList[i].code){
                                countryIndex = i;
                            }
                        }
                        this.popoverAddition={
                            'countryCode':row.feedItem.countryCode,
                            'phone': row.feedItem.phone,
                            'countryIndex': countryIndex
                        };
                        break;
                    case 'SITELINK':
                        this.popoverAddition={
                            'linkText':row.feedItem.linkText,
                            'description': row.feedItem.description,
                            'suggestion': row.feedItem.suggestion,
                            'link': row.feedItem.link
                        };
                        break;
                }
                this.popoverType = row.type;
                this.$store.commit(types.POPOVER_DATA ,{popoverData: this.popover});
                this.$store.commit(types.SHOW_POPOVER ,{showPopover: true});
            },

            //删除广告
            deleteAds(row) {
                this.tipPopover.id = row.id;
                this.popoverType = row.type;
                this.$store.commit(types.TIP_POPOVER_DATA ,{tipPopoverData: this.tipPopover});
                this.$store.commit(types.SHOW_TIP_POPOVER ,{showTipPopover: true});
            },

            renderHeader(h, { column, $index }){
                switch ($index) {
                    case 10:
                        return (
                            <el-tooltip content="每点击成本" placement="top">
                        <div>CPC&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                        </el-tooltip>
                    )
                        break;
                    case 11:
                        return (
                            <el-tooltip content="您的广告与其他广告相比的排名" placement="top">
                        <div>平均排名&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                        </el-tooltip>
                    )
                        break;
                }
            },
            filterData(val,type) {
                switch (type){
                    case 0:
                        this.filter.dateStr = val;
                        break;
                    case 2:
                        this.filter.status = val;
                        break;
                    case 3:
                        switch (val){
                            case 'PLACEMENT':
                                this.filter.statistics = '1';
                                break;
                            case 'IMPRESSION_DEVICE':
                                this.filter.statistics = '2';
                                break;
                            default:
                                this.filter.statistics = '';
                                break;
                        }
                        break;
                    case 4:
                        this.filter.content = val;
                        break;
                    case 6:
                        this.exportTable(val);
                        return;
                    case 7:
                        this.filter.dateStr='';
                        this.filter.startTime = val.slice(0,10);
                        this.filter.endTime = val.slice(13,23);
                        break;
                    case 8:
                        this.filter.type = val;
                        break;
                }
                this.getManagerList();
            },

            //导出表格
            exportTable(val) {
                this.$store.commit(types.EXPORT_STATUS ,{exportStatus: true});
                var filter={
                    dateStr: val.updateTime,
                    status: val.status,
                    content: val.search,
                    target: val.target,
                    statistics: val.category
                };
                if(val.dateRange) {
                    filter.dateStr = '';
                    filter.startTime = getDate(val.dateRange[0]);
                    filter.endTime = getDate(val.dateRange[1]);
                }
                if(!filter.dateStr && !filter.startTime){
                    filter.dateStr = 'LAST_7_DAYS';
                }
                this.$store.dispatch('googleDownloadAddition',filter)
                    .then(response => {
                        if(response.data){
                            window.location.href = response.request.responseURL;
                            this.$store.commit(types.EXPORT_STATUS ,{exportStatus: false});
                        }else {
                            this.$store.commit(types.EXPORT_STATUS ,{exportStatus: false});
                        }
                    })
                    .catch((error) => {
                        this.$store.commit( types.EXPORT_STATUS ,{exportStatus: false});
                    })
            },

            tableRowClassName(row, index) {
                if (row.type == 'category') {
                    return 'info-row';
                } else if(row.type == 'summary'){
                    return 'summary-row';
                }
                return '';
            },

            //获取国家电话代码
            getCountryCode() {
                this.$store.dispatch('getCountryList')
                    .then(response => {
                        if(response.data && response.data.success){
                            this.$store.commit(types.COUNTRY_LIST ,{countryList: response.data.data});
                        }
                    });
            }
        },
        computed:{
            ...mapGetters({
                'countryList': 'getCountryLists'
            })
        },
        created() {
            if (process.BROWSER_BUILD ) {
                if(getParam('page')) {
                    this.filter.pageNum = getParam('page');
                    this.page.currentPage = parseInt(getParam('page'));
                }
                if(getParam('pageSize')){
                    this.filter.pageSize = getParam('pageSize');
                    this.page.pageSize = parseInt(getParam('pageSize'));
                }
            }
            this.getManagerList();
            this.getCountryCode();
        }
    }
</script>

<style scoped lang="scss">
    .content {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
    .table-head {
        height: 47px;
        line-height: 44px;
        background: #F0F5F8;
        border: 1px solid #EAEEF0;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        font-family: MicrosoftYaHei-Bold;
        font-size: 13px;
        color: #666666;
        letter-spacing: 0;
        text-indent: 20px;
    .head-left {
        width: 820px;
        float: left;
    }
    .head-right {
        float: left;
    }
    }
    .icon-action {
        color: #B0BEC5;
        margin: 0 5px;
        cursor: pointer;
    }
    .icon-action:first-child {
        margin: 0 5px 0 0;
    }
    .pagination {
        float: right;
        padding: 20px 0 40px 0;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .status-pot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .pot-blue {
        background: #0686F9;
    }
    .pot-red {
        background: #FF3526;
    }
    .pot-grey {
        background: #AAA;
    }
    .empty-content {
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    img {
        width: 100px;
        height: 100px;
    }
    span {
        font-size: 13px;
        color: #0686F9;
        letter-spacing: 0;
        margin: 20px 0 0 -26px;
        display:inline-block;
    }
    }
    .table{
        position: relative;
    }
    }
</style>
